<template>
  <Transition enter-active-class="transition duration-300 ease-out" enter-from-class="opacity-0 scale-95"
    enter-to-class="opacity-100 scale-100" leave-active-class="transition duration-200 ease-in"
    leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
    <div v-if="isOpen" class="fixed inset-0 z-50 overflow-y-auto volunteer-form">
      <!-- Backdrop -->
      <div class="backdrop" @click="closeForm"></div>

      <!-- Modal -->
      <div class="modal-container">
        <div class="modal">
          <!-- Header -->
          <div class="header">
            <h2 class="header-title">志愿者申请</h2>
            <p class="header-subtitle">加入我们，为流浪动物献出一份爱心</p>

            <!-- Close button -->
            <button @click="closeForm" class="close-button">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>

            <!-- Decorative elements -->
            <div class="decorative-element">
              <div class="icon-container">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24"
                  stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
              </div>
            </div>
          </div>

          <!-- Form -->
          <form @submit.prevent="submitForm" class="form">
            <!-- Name Input -->
            <div class="input-group">
              <label for="name" class="input-label">
                姓名
                <span class="required">*</span>
              </label>
              <div class="input-container">
                <div class="input-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                  </svg>
                </div>
                <input type="text" id="name" v-model="formData.name" required :disabled="isSubmitting"
                  class="input-field" :class="{ 'error': errors.name }" placeholder="请输入您的姓名">
              </div>
              <p v-if="errors.name" class="error-message">{{ errors.name }}</p>
            </div>

            <!-- Email Input -->
            <div class="input-group">
              <label for="email" class="input-label">
                邮箱
                <span class="required">*</span>
              </label>
              <div class="input-container">
                <div class="input-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                  </svg>
                </div>
                <input type="email" id="email" v-model="formData.email" required :disabled="isSubmitting"
                  class="input-field" :class="{ 'error': errors.email }" placeholder="请输入您的邮箱">
              </div>
              <p v-if="errors.email" class="error-message">{{ errors.email }}</p>
            </div>

            <!-- Phone Input -->
            <div class="input-group">
              <label for="phone" class="input-label">
                手机号码
                <span class="required">*</span>
              </label>
              <div class="input-container">
                <div class="input-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                  </svg>
                </div>
                <input type="tel" id="phone" v-model="formData.phone" required :disabled="isSubmitting"
                  class="input-field" :class="{ 'error': errors.phone }" placeholder="请输入您的手机号码">
              </div>
              <p v-if="errors.phone" class="error-message">{{ errors.phone }}</p>
            </div>

            <!-- Submit Button -->
            <div class="submit-container">
              <button type="submit" :disabled="isSubmitting" class="submit-button">
                <span v-if="isSubmitting" class="submitting">
                  <svg class="spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor"
                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                    </path>
                  </svg>
                  提交中...
                </span>
                <span v-else>提交申请</span>
              </button>
            </div>
          </form>
        </div>
      </div>

      <!-- Success/Error Toast -->
      <Transition enter-active-class="transform transition duration-300 ease-out"
        enter-from-class="translate-y-2 opacity-0" enter-to-class="translate-y-0 opacity-100"
        leave-active-class="transform transition duration-200 ease-in" leave-from-class="translate-y-0 opacity-100"
        leave-to-class="translate-y-2 opacity-0">
        <div v-if="toast.show" class="toast" :class="toast.type === 'success' ? 'success' : 'error'">
          <svg v-if="toast.type === 'success'" class="toast-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
          <svg v-else class="toast-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span class="toast-message">{{ toast.message }}</span>
        </div>
      </Transition>
    </div>
  </Transition>
</template>

<script setup>
import { ref, reactive } from 'vue';
import axios from 'axios';
import Cookies from 'js-cookie';
import moment from 'moment';
const props = defineProps({
  isOpen: {
    type: Boolean,
    required: true
  }
});

const emit = defineEmits(['close']);

const formData = reactive({
  name: '',
  email: '',
  phone: ''
});

const errors = reactive({
  name: '',
  email: '',
  phone: ''
});

const isSubmitting = ref(false);
const toast = reactive({
  show: false,
  type: 'success',
  message: ''
});

const validateForm = () => {
  let isValid = true;
  errors.name = '';
  errors.email = '';
  errors.phone = '';

  if (!formData.name) {
    errors.name = '请输入姓名';
    isValid = false;
  }

  if (!formData.email) {
    errors.email = '请输入邮箱';
    isValid = false;
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
    errors.email = '请输入有效的邮箱地址';
    isValid = false;
  }

  if (!formData.phone) {
    errors.phone = '请输入手机号码';
    isValid = false;
  } else if (!/^1[3-9]\d{9}$/.test(formData.phone)) {
    errors.phone = '请输入有效的手机号码';
    isValid = false;
  }

  return isValid;
};

const showToast = (type, message) => {
  toast.type = type;
  toast.message = message;
  toast.show = true;
  setTimeout(() => {
    toast.show = false;
  }, 3000);
};

const submitForm = async () => {
  if (!validateForm()) return;
  const token = Cookies.get('token');
  isSubmitting.value = true;
  const volunteerData = {
    name: formData.name,
    email: formData.email,
    phone: formData.phone,
    zyztime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
  }
  try {
    const response = await axios.post('http://localhost:8080/Petrescue/users/addVolunteer', volunteerData,
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${Cookies.get('token')}` // 添加token
        },
        withCredentials: true
      }
    );
    const { code, date, message } = response.data;
    if (code == 200) {
      showToast('success', '申请提交成功！我们会尽快与您联系。');
      setTimeout(() => {
        closeForm();
      }, 2000);
    } else {
      showToast('success', message);
      setTimeout(() => {
        closeForm();
      }, 2000);
    }

  } catch (error) {
    console.error('申请失败:', error);
  } finally {
    isSubmitting.value = false;
  }
};

const closeForm = () => {
  emit('close');
  // Reset form
  Object.keys(formData).forEach(key => formData[key] = '');
  Object.keys(errors).forEach(key => errors[key] = '');
};
</script>

<style lang="less" scoped>
// 定义颜色变量
@primary-color: #ea580c;
@primary-dark: #c2410c;
@primary-light: #fef3c7;
@background-light: #fff9f0;
@text-dark: #7c2d12;
@text-medium: #9a3412;
@border-color: #f59e0b;
@error-color: #ef4444;
@success-color: #10b981;

// 过渡效果
.transition-all {
  transition: all 0.3s ease;
}

.volunteer-form {
  .backdrop {
    .fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
  }

  .modal-container {
    .flex;
    min-height: 100%;
    align-items: center;
    justify-content: center;
    padding: 1rem;

    .modal {
      position: relative;
      width: 100%;
      max-width: 28rem;
      transform: translate3d(0, 0, 0);
      overflow: hidden;
      border-radius: 1rem;
      background: white;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      transition: all 0.3s ease;

      .header {
        position: relative;
        background: linear-gradient(90deg, @primary-color 0%, @primary-dark 100%);
        padding: 2rem 1.5rem;
        text-align: center;

        .header-title {
          font-size: 1.5rem;
          font-weight: 700;
          color: white;
          margin-bottom: 0.5rem;
        }

        .header-subtitle {
          color: rgba(255, 255, 255, 0.9);
          font-size: 0.875rem;
        }

        .close-button {
          position: absolute;
          top: 1rem;
          right: 1rem;
          color: rgba(255, 255, 255, 0.8);
          transition: color 0.3s ease;

          &:hover {
            color: white;
          }
        }

        .decorative-element {
          position: absolute;
          bottom: -1.5rem;
          left: 50%;
          transform: translateX(-50%);

          .icon-container {
            height: 3rem;
            width: 3rem;
            border-radius: 9999px;
            background: white;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;

            .icon {
              height: 1.5rem;
              width: 1.5rem;
              color: @primary-color;
            }
          }
        }
      }

      .form {
        padding: 3rem 1.5rem 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;

        .input-group {
          .input-label {
            display: block;
            font-size: 0.875rem;
            font-weight: 500;
            color: @text-dark;
            margin-bottom: 0.5rem;

            .required {
              color: @error-color;
            }
          }

          .input-container {
            position: relative;
            border-radius: 0.5rem;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

            .input-icon {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              padding-left: 0.75rem;
              display: flex;
              align-items: center;
              pointer-events: none;
              color: #9ca3af;
            }

            .input-field {
              display: block;
              width: 100%;
              padding: 0.75rem 1rem 0.75rem 2.5rem;
              border: 1px solid #d1d5db;
              border-radius: 0.5rem;
              background: white;
              color: @text-dark;
              transition: all 0.3s ease;

              &:focus {
                outline: none;
                border-color: @primary-color;
                box-shadow: 0 0 0 2px rgba(@primary-color, 0.2);
              }

              &:disabled {
                background: #f9fafb;
                color: #6b7280;
              }

              &.error {
                border-color: @error-color;

                &:focus {
                  border-color: @error-color;
                  box-shadow: 0 0 0 2px rgba(@error-color, 0.2);
                }
              }
            }
          }

          .error-message {
            color: @error-color;
            font-size: 0.875rem;
            margin-top: 0.25rem;
          }
        }

        .submit-container {
          padding-top: 1rem;

          .submit-button {
            width: 100%;
            background: linear-gradient(90deg, @primary-color 0%, @primary-dark 100%);
            color: white;
            padding: 0.75rem 1rem;
            border: none;
            border-radius: 0.5rem;
            font-weight: 500;
            transition: all 0.3s ease;
            transform: scale(1);
            cursor: pointer;

            &:hover:not(:disabled) {
              background: linear-gradient(90deg, @primary-dark 0%, darken(@primary-dark, 10%) 100%);
              transform: scale(1.02);
            }

            &:focus {
              outline: none;
              box-shadow: 0 0 0 2px rgba(@primary-color, 0.5);
            }

            &:disabled {
              opacity: 0.5;
              cursor: not-allowed;
              transform: scale(1);
            }

            .submitting {
              display: flex;
              align-items: center;
              justify-content: center;

              .spinner {
                animation: spin 1s linear infinite;
                margin-right: 0.75rem;
                height: 1.25rem;
                width: 1.25rem;
                color: white;
              }
            }
          }
        }
      }
    }
  }

  .toast {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 0.5rem;

    &.success {
      background: @success-color;
    }

    &.error {
      background: @error-color;
    }

    .toast-icon {
      height: 1.25rem;
      width: 1.25rem;
      color: white;
    }

    .toast-message {
      color: white;
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

// 辅助类
.fixed {
  position: fixed;
}

.flex {
  display: flex;
}

.absolute {
  position: absolute;
}
</style>